<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="新增问题单" name="one">
        <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px"
          class="form-inline">
          <div class="base">
            <header>基本属性:</header>
            <el-form-item label="版本:" prop="projectVersionId">
              <el-select v-model="formData.projectVersionId" filterable clearable remote :loading="selectLoading"
                :remote-method="remoteMethod" placeholder="请选择版本">
                <el-option v-for="item in versionList" :key="item.id" :label="item.versionName" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="报告员:" prop="creator">
              <el-input v-model="formData.creator" :disabled="true" />
            </el-form-item>
            <el-form-item label="指派人:" prop="developer">
              <el-select v-model="formData.developer" filterable clearable placeholder="请选择指派人">
                <el-option v-for="item in memberList" :key="item.memberName" :label="item.memberName"
                  :value="item.memberId" />
              </el-select>
            </el-form-item>
            <el-form-item label="问题类型:" prop="bugType">
              <el-select v-model="formData.bugType" filterable clearable placeholder="请选择问题类型">
                <el-option v-for="item in getIntDictOptions(DICT_TYPE.BUG_TYPE)" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="严重级别:" prop="bugLevel">
              <el-select v-model="formData.bugLevel" filterable clearable placeholder="请选择严重级别">
                <el-option v-for="item in getIntDictOptions(DICT_TYPE.BUG_LEVEL)" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态:" prop="bugStatus">
              <el-select v-model="formData.bugStatus" clearable filterable placeholder="请选择状态" @change="changeStatus">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="优先级:" prop="bugPriority">
              <el-select v-model="formData.bugPriority" filterable clearable placeholder="请选择优先级">
                <el-option v-for="item in getIntDictOptions(DICT_TYPE.PRIORITY)" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="出现频率:" prop="bugProbability">
              <el-select v-model="formData.bugProbability" filterable clearable placeholder="请选择出现频率">
                <el-option v-for="item in getIntDictOptions(DICT_TYPE.PROBABILITY)" :key="item.value"
                  :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="对应用例:" prop="testCaseId" class="case-item">
              <el-tooltip content="可复制测试执行用例标识获取测试计划、提测版本、测试用例集和对应用例" placement="top" effect="light" class="case-tips">
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
              <el-select v-model="formData.testCaseId" multiple filterable placeholder="请选择对应用例"
                @input="handleCaseInput">
                <el-option v-for="item in testCasesList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="测试计划:" prop="testPlanId">
              <el-select v-model="formData.testPlanId" filterable clearable placeholder="请选择测试计划"
                @change="getTestCasesList">
                <el-option v-for="item in testPlanList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="提测版本:" prop="requestFormId">
              <el-select v-model="formData.requestFormId" placeholder="请选择提测版本" filterable clearable>
                <el-option v-for="item in commitList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="测试用例集:" prop="testPlanCasesId">
              <el-tree-select v-model="formData.testPlanCasesId" :data="testPlanCasesList" check-strictly
                :props="{ label: 'name', value: 'id' }" filterable clearable node-key="id" @change="getTestCasesList"
                placeholder="请选择测试用例集" :render-after-expand="false" />
            </el-form-item>
            <el-form-item label="影响域分析:" prop="bugInfluence" style="width: 96%" v-if="isShowReason">
              <el-input v-model="formData.bugInfluence" placeholder="请输入影响域分析" type="textarea" clearable />
            </el-form-item>
            <el-form-item label="问题原因:" prop="bugReason" style="width: 96%" v-if="isShowReason">
              <el-input v-model="formData.bugReason" clearable placeholder="请输入问题原因" type="textarea" />
            </el-form-item>
            <el-form-item label="解决措施:" prop="bugSolution" style="width: 96%" v-if="isShowReason">
              <el-input v-model="formData.bugSolution" placeholder="请输入解决措施" type="textarea" clearable />
            </el-form-item>
            <el-form-item label="关闭版本:" prop="closeVersionId" v-if="isShowCloseVersion">
              <el-select v-model="formData.closeVersionId" filterable clearable placeholder="请选择关闭版本">
                <el-option v-for="item in commitList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="测试环境:" prop="environment">
              <el-input v-model="formData.environment" clearable placeholder="请输入测试环境" />
            </el-form-item>
          </div>
          <div class="desc">
            <header>问题描述:</header>
            <el-form-item label="问题描述:" prop="description" style="width: 100%">
              <el-input v-model="formData.description" placeholder="请输入问题描述" type="textarea" rows="5" clearable />
            </el-form-item>
            <el-form-item label="问题详情:" prop="bugDetails" style="width: 100%">
              <el-input v-model="formData.bugDetails" placeholder="请输入问题详细信息，包括问题复现步骤" type="textarea" rows="8"
                clearable />
            </el-form-item>
            <el-form-item label="附件:" prop="file" class="upload-wrap">
              <UploadFile @success="handleUploadFiles" ref="defectUpload" :fileList="fileList" :pasteImg="imageUrl" />
              <div ref="dropArea" class="paste" @paste.prevent="handlePaste" tabindex="0">
                <template v-if="imageUrl.length">
                  <span v-for="img of imageUrl" :key="img" class="paste-img" :class="{ fullscreen: isFullscreen }"
                    @dblclick="toggleFullscreen">
                    <el-image :src="img.url" title="双击放大预览" />
                    <el-button @click="deleteImage(img)" circle size="small" v-if="!isFullscreen"
                      title="删除图片">×</el-button>
                    <!-- 添加一个关闭按钮，仅在全屏预览时显示 -->
                    <button v-if="isFullscreen" class="close-button" @click="toggleFullscreen" title="关闭预览">×</button>
                  </span>
                </template>
                <p>点击此处粘贴图片(Ctrl+V)</p>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="关联问题单" name="two">
        <ContentWrap>
          <!-- 搜索工作栏 -->
          <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px">
            <el-form-item label="ID" prop="id">
              <el-input v-model="queryParams.id" clearable placeholder="请输入问题ID" class="!w-200px" />
            </el-form-item>
            <el-form-item label="问题类型" prop="bugType">
              <el-select v-model="queryParams.bugType" filterable clearable placeholder="请选择问题类型" class="!w-200px">
                <el-option v-for="item in bugTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="queryParams.description" clearable placeholder="请输入描述" class="!w-200px" />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery">
                <Icon class="mr-5px" icon="ep:search" />
                搜索
              </el-button>
              <el-button @click="resetQuery">
                <Icon class="mr-5px" icon="ep:refresh" />
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </ContentWrap>
        <el-table v-loading="loading" :data="list" row-key="id" :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="40" reserve-selection />
          <el-table-column align="center" label="ID" prop="id" />
          <el-table-column align="center" label="描述" prop="description" />
          <el-table-column align="center" label="状态" prop="bugStatus">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUG_STATUS" :value="scope.row.bugStatus" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="责任人" prop="developer" />
          <el-table-column align="center" label="类型" prop="bugType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUG_TYPE" :value="scope.row.bugType" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="严重级别" prop="bugLevel">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUG_LEVEL" :value="scope.row.bugLevel" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="优先级" prop="bugPriority">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.PRIORITY" :value="scope.row.bugPriority" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交时间" prop="createTime" :formatter="dateFormatter" />
        </el-table>
        <!-- 分页 -->
        <div class="page">
          <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
            @pagination="getList" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'Fail' })
import * as DefectApi from '@/api/defect'
import { InfoFilled } from '@element-plus/icons-vue'
import { getPlanList, getCaseList, getCaseListByName } from '@/api/testPlan'
import { useAppStore } from '@/store/modules/app'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import UploadFile from '../defectManage/component/UploadFileCom.vue'
import { getTestboxTree, getTestformList } from '@/api/usecase'
import { getProjectMemberList } from '@/api/project'
import { getDemandList, getProjectMemberRole } from '@/api/demand'
import { downloadByUrl1 } from '@/utils/filt'
import { dateFormatter } from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import { debounce } from 'lodash-es'
const userStore = useUserStore()
const userName = computed(() => userStore.user.nickname ?? '')
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const loading = ref(false)
const formType = ref('')
const formData = ref({} as any)
const formRules = reactive({
  projectVersionId: [{ required: true, message: '版本不能为空', trigger: 'change' }],
  bugType: [{ required: true, message: '问题类型不能为空', trigger: 'change' }],
  bugLevel: [{ required: true, message: '问题级别不能为空', trigger: 'change' }],
  bugProbability: [{ required: true, message: '出现频率不能为空', trigger: 'change' }],
  bugPriority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
  bugStatus: [{ required: true, message: '问题状态不能为空', trigger: 'change' }],
  // testPlanId: [{ required: true, message: '测试计划不能为空', trigger: 'change' }],
  description: [{ required: true, message: '描述不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const memberList = ref([] as any) // 用户列表
const versionList = ref([] as any) // 版本列表
const testPlanList = ref([] as any) // 测试计划
const testPlanCasesList = ref([] as any) // 测试用例集
const testCasesList = ref([] as any) // 测试用例集
const fileList = ref([] as any) // 问题文件列表
const defectUpload = ref() // 问题单上传ref
const isShowReason = ref(false) // 是否显示解决措施等输入框
const activeName = ref('one') // tab 选中
const total = ref(0) // 列表的总页数
const list = ref([] as any) //问题单列表
const casesList = ref([] as any) //问题单选中
const role = ref('')
const commitList = ref([] as any)
const imageUrl = ref([] as any)
const dropArea = ref()
const isFullscreen = ref(false) // 控制图片是否全屏显示
const isShowCloseVersion = ref(false)
const selectLoading = ref(false)
const bugTypeList = ref([] as any)
const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({
  // 问题单参数
  pageNo: 1,
  pageSize: 10,
  testPlanId: '',
  bugType: '',
  description: '',
  id: '',
  projectId: projectId.value
})
// 问题状态
const statusList = computed(() => {
  const list = getIntDictOptions(DICT_TYPE.BUG_STATUS)
  if (['projectManager', 'developer'].includes(role.value)) {
    return list.filter((l) => l.label.indexOf('已关闭') == -1)
  }
  return list
})
// 问题详情
const info = ref({} as any)
/** 打开弹窗 */
const open = async (type: string, info?) => {
  dialogVisible.value = true
  dialogTitle.value = '问题单管理'
  formType.value = type
  isShowReason.value = false
  isShowCloseVersion.value = false
  info.value = info
  resetForm(info)
  getMembers()
  getBugType()
  // getVersion()
  getTestPlan()
  getTestPlanCasesList()
  getList()
  getProjectMemberRoleFn()
  getCommitList()
  getTestCasesList()
}
watch(
  () => isShowReason.value,
  (newVal) => {
    if (!newVal) {
      formData.value = {
        ...formData.value,
        bugInfluence: '',
        bugReason: '',
        bugSolution: ''
      }
    }
  }
)

watch(
  () => isShowCloseVersion.value,
  (newVal) => {
    if (!newVal) {
      formData.value = {
        ...formData.value,
        closeVersionId: ''
      }
    }
  }
)
// 对应用例输入
const handleCaseInput = debounce(async (event) => {
  const inputValue = event.target.value
  const data = await DefectApi.getTestCaseByLogo({ logo: inputValue })
  if (data) {
    formData.value = {
      ...formData.value,
      requestFormId: data.requestFormId,
      testPlanCasesId: data.testSuiteId,
      testPlanId: data.testPlanId
    }
    await getTestCasesList() // 获取该输入框下拉数据
    formData.value.testCaseId = [data.id]
  } else {
    message.warning('未查询到该用例相关信息')
  }
}, 1000)
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 获取问题类型
const getBugType = () => {
  const list = getIntDictOptions(DICT_TYPE.BUG_TYPE)
  bugTypeList.value = list
}
// 复制粘贴
const handlePaste = async (e) => {
  const items = e.clipboardData.items
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    if (item.type.indexOf('image') === 0) {
      const file = item.getAsFile()
      if (file) {
        // 将File对象转换为Base64
        const base64Image = await convertFileToBase64(file)
        imageUrl.value.push({ url: base64Image, file: file })
      }
    }
  }
  if (fileList.value.length + imageUrl.value.length > 5) {
    message.error('上传文件数量不能超过5个！')
    imageUrl.value.pop()
    return
  }
}

// 将File对象转换为Base64编码的辅助函数
const convertFileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (event) => {
      resolve(event.target?.result)
    }
    reader.onerror = (error) => {
      reject(error)
    }
    reader.readAsDataURL(file)
  })
}
// 删除图片的方法
const deleteImage = (img) => {
  imageUrl.value = imageUrl.value.filter((i) => i.url != img.url)
}

// 双击图片时切换全屏预览状态
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
}
// 获取人员在项目中角色
const getProjectMemberRoleFn = async () => {
  let data = await getProjectMemberRole({ projectId: projectId.value })
  role.value = data
}
/** 查询问题单列表 */
const getList = async () => {
  loading.value = true
  try {
    queryParams.testPlanId = info.value.testPlanId
    const data = await DefectApi.getDefectList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// 状态切换
const changeStatus = (val) => {
  isShowReason.value = val == 2
  isShowCloseVersion.value = val == 7
}
/** 重置表单 */
const resetForm = (info) => {
  formData.value = {
    id: '',
    description: '',
    bugType: 1,
    bugLevel: 2,
    bugStatus: 1,
    bugPriority: 3,
    bugProbability: 7,
    projectVersionId: '',
    testPlanId: info.testPlanId,
    testPlanCasesId: info.testSuiteId,
    testCaseId: [info.id],
    developer: '',
    creator: userName.value,
    bugDetails: '',
    bugEnclosure: '',
    bugInfluence: '',
    bugReason: '',
    bugSolution: '',
    closeVersionId: '',
    requestFormId: info.requestFormId,
    environment: 'Windows 10',
    projectId: projectId.value
  }
  fileList.value = []
  imageUrl.value = []
  formRef.value?.resetFields()
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 获取提测单
const getCommitList = async () => {
  commitList.value = []
  let data = await getTestformList({
    projectId: projectId.value
  })
  commitList.value = data.map((item) => {
    return {
      label: `${item.version.versionName}版本-${item.rounds}轮次`,
      value: item.id
    }
  })
}
// 获取测试用例集
const getTestPlanCasesList = async () => {
  let data = await getTestboxTree({ projectId: projectId.value })
  testPlanCasesList.value = data ? [data] : []
}

// 获取对应用例
const getTestCasesList = async () => {
  const params = {
    projectId: projectId.value,
    testSuiteId: formData.value.testPlanCasesId,
    testPlanId: formData.value.testPlanId
  }
  let data = await getCaseListByName(params)
  testCasesList.value = data
}
// 获取成员列表
const getMembers = async () => {
  let data = await getProjectMemberList({
    pageNo: 1,
    pageSize: 100,
    projectId: projectId.value
  })
  memberList.value = data
}
// 版本远程搜索
const remoteMethod = async (query: string) => {
  if (query) {
    selectLoading.value = true
    try {
      getVersion(query)
    } finally {
      selectLoading.value = false
    }
  } else {
    getVersion()
  }
}
// 获取版本列表
const getVersion = async (query) => {
  let data = await getDemandList({
    pageNo: 1,
    pageSize: 100,
    versionName: query,
    projectId: projectId.value
  })
  versionList.value = data.list
}

// 获取测试计划
const getTestPlan = async () => {
  let data = await getPlanList({ projectId: projectId.value })
  testPlanList.value = data
}
// 创建问题文件操作完成
const handleUploadFiles = (files) => {
  fileList.value = files
}

/** 提交表单 */
const emit = defineEmits(['success', 'caseSuccess']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  if (activeName.value == 'one') {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    let result = ''
    formLoading.value = true
    try {
      const data = {
        id: formData.value.id || '',
        description: formData.value.description || '',
        bugType: formData.value.bugType || '',
        bugLevel: formData.value.bugLevel || '',
        bugStatus: formData.value.bugStatus || '',
        bugPriority: formData.value.bugPriority || '',
        bugProbability: formData.value.bugProbability || '',
        projectVersionId: formData.value.projectVersionId || '',
        testPlanId: formData.value.testPlanId || '',
        testPlanCasesId: formData.value.testPlanCasesId || '',
        testCaseId: formData.value.testCaseId || [],
        developer: formData.value.developer || '',
        creator: userName.value,
        bugDetails: formData.value.bugDetails || '',
        bugEnclosure: formData.value.bugEnclosure || '',
        bugInfluence: formData.value.bugInfluence || '',
        bugReason: formData.value.bugReason || '',
        bugSolution: formData.value.bugSolution || '',
        projectId: projectId.value,
        requestFormId: formData.value.requestFormId || '',
        closeVersionId: formData.value.closeVersionId || '',
        environment: formData.value.environment || ''
      }
      const formDataObj = new FormData()
      if (fileList.value.length) {
        fileList.value.forEach((item) => {
          if (item.raw) {
            formDataObj.append(`files`, item.raw, item.name)
          } else {
            formDataObj.append(`files`, new Blob([item.url], { type: '' }), item.name)
          }
        })
      }
      if (imageUrl.value.length) {
        imageUrl.value.forEach((item) => {
          if (item.file) {
            formDataObj.append(`files`, item.file, '粘贴图片' + new Date().getTime() + '.png')
          }
        })
      }
      if (!fileList.value.length && !imageUrl.value.length) {
        formDataObj.append('files', new Blob([], { type: '' }))
      }
      console.log('缺陷管理表单数据', data)
      if (formType.value === 'create') {
        formDataObj.append(
          'createReqVO',
          new Blob([JSON.stringify(data)], { type: 'application/json' })
        )
        result = await DefectApi.createDefect(formDataObj)
        message.success(t('common.createSuccess'))
      } else {
        formDataObj.append(
          'updateReqVO',
          new Blob([JSON.stringify(data)], { type: 'application/json' })
        )
        result = await DefectApi.updateDefect(formDataObj)
        message.success(t('common.updateSuccess'))
      }
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success', [result])
    } finally {
      formLoading.value = false
    }
  } else {
    emit('caseSuccess', casesList.value)
    dialogVisible.value = false
  }
}

// 下载
const download = (val) => {
  if (!val || !val.url) {
    message.warning('无连接')
    return
  }
  downloadByUrl1({ url: val.url, fileName: val.name })
}

// 列表选择
const handleSelectionChange = (val) => {
  casesList.value = val
}
</script>
<style scoped lang="scss">
:deep(.case-item) {
  .el-form-item__label {
    padding: 0 22px 0 0;
  }

  .el-icon.el-tooltip__trigger {
    position: absolute;
    left: -18px;
  }
}

.fullscreen {
  position: fixed !important;
  left: 5% !important;
  top: 5% !important;
  width: 90% !important;
  height: 90% !important;
  object-fit: contain !important;
  z-index: 9999 !important;
}

.close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 50%;
}

.upload-wrap {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: left;
    align-items: flex-start;
  }
}

.paste {
  padding: 10px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: auto;
  margin-left: 10px;
  min-height: 145px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  &-img {
    position: relative;
    margin-right: 15px;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 5px;

    .el-image {
      width: 100%;
      height: 100%;
    }

    .el-button {
      position: absolute;
      right: -10px;
      top: -10px;
      display: none;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
      font-weight: bold;
      border-radius: 50%;
    }

    &:hover {
      .el-button {
        display: flex;
      }
    }
  }
}

.el-form {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.el-dialog__body {
  display: flex;
  justify-content: space-between;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-form {
  display: flex;
}

header {
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 13px;
}

.base {
  padding: 10px 0 0;
  margin-bottom: 10px;
}

.desc {
  padding: 10px 30px 0 0;
  margin-bottom: 10px;
  flex: 1;
  margin-left: 10px;
}

:deep(.el-collapse-item__header) {
  font-weight: bold;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.form-inline .el-input {
  --el-input-width: 180px;
}

.form-inline .el-select {
  --el-select-width: 180px;
}

.el-tag {
  cursor: pointer;
}
</style>
